<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: red;
            /*border: 1px solid black;*/
            /*padding: 1px;*/
        }

        .son {
            margin: 0 auto;
            /*margin-left: auto;
            margin-right: auto;
            他俩合并就是margin: 0 auto;*/
            /*只能让盒子模型居中,给盒子使用*/
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--
大容器套小容器,如果大容器与小容器之间没有任何东西,即无空格,padding等等,那么他俩的margin是共用的,
否则各自用各自的-->
<!--所以,要用大容器的padding,而不要用小容器的margin-->
<div class="father">
    <div class="son">
    </div>
</div>
</body>
</html>